<template>
  <div class="appbox">
    <!-- 一级路由的坑 -->
    <router-view></router-view>
    <!-- 使用tabbr 组件 -->
    <Apptabbar v-show="isshowtabbar"></Apptabbar>
  </div>
</template>

<script>
import Apptabbar from '@/components/Apptabbar.vue';
export default {
  name: 'App',
  components: {
    Apptabbar
  },
  data() {
    return {
      isshowtabbar: true,
    }
  },
  mounted() {
    // console.log(this.$route);
  },
  // computed: {
  //   isshowflag() {
  //     // console.log(this.$route);
  //     return this.$route.meta.isshowtabbar
  //   }
  // }

  watch: {
    $route: {
      handler(newvalue) {
        // console.log('路由变化了', newvalue);
        this.isshowtabbar = newvalue.meta.isshowtabbar
      },
      deep: true
    }
  }
}
</script>

<style lang="less" scoped>
//语法1: less 中可以定义变量 @变量名:值;
//语法2: 实现结构的嵌套, 这样省去了命名, 因为嵌套所以很容易清楚标签结构
//语法3: 定义minxi(函数结构)
@redcolor: red;
@font30: 30px;

//没有参数的函数
.appbox {
  height: 100%;
}

.fn {
  width: 200px;
  height: 200px;
  background-color: greenyellow;
  border: 1px solid blue;
}

// 带参数的函数
.fn1(@w, @h, @bgcolor) {
  width: @w;
  height: @h;
  background-color: @bgcolor;
  border: 1px solid blue;
  font-size: @font30;
}

.box {
  background-color: @redcolor;

  >p {
    font-size: 50px;
  }
}

.box1 {
  .fn;
  background-color: green;
  margin: 10px;
}

.box2 {
  .fn1(100px, 100px, deeppink)
}
</style>
